<template>
    <el-container class="payment-container">
      <el-card shadow="hover">
        <h2 class="order-title">订单信息</h2>
        <div class="order-info">
          <p>订单号: <strong>{{ order.orderNum }}</strong></p>
          <p>购买数量: <strong>{{ order.num }}</strong></p>
          <p>支付金额: <strong>{{ order.coins }}曼波币</strong></p>
        </div>
  
        <!-- 动态控制按钮的禁用状态、颜色和文本 -->
        <el-button
          class="pay-button"
          type="primary"
          :class="{ 'is-disabled': order.type === 2 }"
          :disabled="order.type === 2"
          @click="submitPayment"
        >
          {{ order.type === 2 ? '已支付' : '确认支付' }}
        </el-button>
      </el-card>
    </el-container>
  </template>
  
  <script setup lang="ts">
  import { defineProps, onMounted, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
  import { useRoute } from 'vue-router';
  import router from '@/router';
  
  const route = useRoute();
  const orderId = route.params.id;
  const payToken = route.params.token;
  const order = ref({});

  
  // 获取订单信息
  onMounted(() => {
    axios.get('/api/orders/get_by_token/' +payToken)
      .then((response) => {
        // 处理订单信息
        order.value = response.data.data;
      })
      .catch((error) => {
        console.error('获取订单信息失败:', error);
      });
  });
  
  // 提交支付请求
  const submitPayment = () => {
    axios.post('/api/orders/pay_order/' + payToken)
      .then((response) => {
        if (response.data.code === 200) {
          ElMessage.success('支付成功！');
          router.push('/');
        } else {
          console.error('支付失败:', response.data.msg);
          ElMessage.error("支付失败:",response.data.msg);
        }
      })
      .catch((error) => {
        console.error('支付请求失败:', error);
        ElMessage.error('支付请求失败，请稍后再试！');
      });
  };
  </script>
  
  <style scoped>
  .payment-container {
    /* 使用 flexbox 实现垂直和水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 设置为全屏高度 */
    padding: 0 20px;
    background-color: #f9f9f9;
  }
  
  .el-card {
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    max-width: 500px;
    width: 100%; /* 使卡片在小屏幕时自适应 */
  }
  
  .order-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .order-info {
    margin-bottom: 30px;
  }
  
  .order-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
  }
  
  .order-info strong {
    color: #333;
    font-weight: bold;
  }
  
  .pay-button {
    width: 100%;
    height: 45px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease;
  }
  
  .is-disabled {
    background-color: #d3d3d3 !important;
    color: #ffffff !important;
    cursor: not-allowed;
  }
  
  /* 使支付按钮在启用时有更好的交互效果 */
  .pay-button:not(.is-disabled):hover {
    background-color: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
  }
  </style>
  